<template>
	<view class="addworkBox">
		<view class="itembox">
			<view class="item">
				<view class="label">
					有效时间
				</view>
				<view class="value">
					<picker mode="date" :value="time1" :start="startDate" :end="endDate" @change="timeChange($event,'time1')">
						<view class="uni-input">{{time1}}</view>
					</picker>
					<view class="line"></view>
					<picker mode="date" :value="time2" :start="startDate" :end="endDate" @change="timeChange($event,'time2')">
						<view class="uni-input">{{time2}}</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">
					使用时间(每天什么时间段可以使用)
				</view>
				<view class="value">
					<picker mode="time" :value="time3" start="09:01" end="21:01" @change="bindTimeChange($event,'time3')">
						<view class="uni-input">{{time3}}</view>
					</picker>
					<view class="line"></view>
					<picker mode="time" :value="time4" start="09:01" end="21:01" @change="bindTimeChange($event,'time4')">
						<view class="uni-input">{{time4}}</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="title">
					使用备注
				</view>
				<view class="valbox">
					<input type="text" v-model="content" placeholder="请输入使用备注" />
				</view>
			</view>
		</view>
		<view class="add" @click="add">
			<text>
				确定
			</text>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				time1: currentDate,
				time2: currentDate,
				'time3':'9:00',
				'time4':'22:00',
				content:"",
			}
		},
		
		methods: {
			timeChange(e, key) {
				this[key] = e.target.value
			},
			bindTimeChange(e, key){
				
				this[key] = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			add(){
				let that = this
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.setData({
				     userdata: {
				       'time1':that.time1,
					   'time2':that.time2,
					   'time3':that.time3,
					   'time4':that.time4,
					   'content':that.content,
				     }
				   })
				uni.navigateBack({
					 delta: 1
				})
			}

		},

	}
</script>

<style lang="less">
	.itembox {
		padding: 30rpx;

		.item {
			border-bottom: 1rpx solid #C7BEBE;
			padding: 20rpx 0;

			.value {
				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}
			}

			.title {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 20rpx;
			}

			.line {
				width: 88rpx;
				height: 2rpx;
				float: left;
				background-color: #D9D9D9;
				margin: 0 18rpx;
				margin-top: 22rpx;
			}

			picker {
				width: 270rpx;
				height: 46rpx;
				float: left;
				background-color: #fff;
				line-height: 46rpx;
				text-align: center;
				font-size: 30rpx;
			}

			input {
				line-height: 48rpx;
				font-size: 28rpx;
			}
		}
	}

	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
	
		text {
			display: block;
			padding: 20rpx 0;
			background-color: #e41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	}
</style>
